<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>


  <tui-tabs :tabs="tabs" itemWidth="50%" :currentTab="currentTab" @change="tabChange"></tui-tabs>
  <view v-if="currentTab===0">
    <view class="bg-white padding">
      <uni-easyinput type="textarea" autoHeight v-model="content" placeholder="请输入反馈内容"></uni-easyinput>

      <view class="margin-top-xs">
        <view class="grid col-4 grid-square flex-sub">
          <view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage"
                :data-url="prefix+imgList[index]">
            <image :src="prefix+imgList[index]" mode="aspectFill"></image>
            <view class="cu-tag bg-red" @tap.stop="delImage" :data-index="index">
              <text class='cuIcon-close'></text>
            </view>
          </view>
          <view class="solids" @tap="chooseImage" v-if="imgList.length<4">
            <text class='cuIcon-cameraadd'></text>
          </view>
        </view>
      </view>
    </view>
    <view class="flex flex-sub flex-direction padding margin-bottom-xl">
      <button class="cu-btn lg  bg-gradual-blue" @click="submit">提交</button>
    </view>
  </view>
  <view v-else>
    <FeedbackHistory></FeedbackHistory>
  </view>

</template>

<script setup lang="ts">

import MrCustom from "@/components/common/MrCustom.vue";
import {ref} from "vue";
import {imagePathPrefix, uploadFile} from '/settings'
import FeedbackHistory from "@/pages/common/feedback/components/FeedbackHistory.vue";
import api from "@/api";
import {useUserStore} from "@/store";

const url = uploadFile.url
const name = uploadFile.name
const prefix = imagePathPrefix
const userStore =useUserStore()

const content = ref()
const imgList = ref([])
const currentTab = ref(0)


const tabs = ref([{
  name: '自助反馈',
}, {
  name: '反馈记录'
}])

const tabChange = (e: any) => {
  currentTab.value = e.index
}
const submit=()=>{
  api.feedback.create({
    username:userStore.userInfo.username,
    avatar:userStore.userInfo.avatar,
    name:' ',
    content:content.value,
    images:JSON.stringify(imgList.value)
  }).then(res=>{
    if(res&&res.data.code===0){
      uni.showToast({
        title:res.data.msg
      })
    }
  })
}

const chooseImage = () => {
  uni.chooseImage({
    count: 4, //默认9
    success: (res) => {
      console.log(res)
      for (let i = 0; i < res.tempFilePaths.length; i++) {
        uni.uploadFile({
          url: url, //仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[i],
          name: name,
          success: (uploadFileRes) => {
            let tmp = JSON.parse(uploadFileRes.data).data
            if (imgList.value.length != 0) {
              imgList.value = imgList.value.concat(tmp)
            } else {
              imgList.value = [tmp]
            }
          }
        });
      }
    }
  });
}
const viewImage = (e: any) => {
  let tmp = JSON.parse(JSON.stringify(imgList.value))
  Object.keys(tmp).forEach(key => {
    tmp[key] = prefix + tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: e.currentTarget.dataset.url
  });
}
const delImage = (e: any) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这张图片吗？',
    cancelText: '取消',
    confirmText: '确认',
    success: res => {
      if (res.confirm) {
        imgList.value.splice(e.currentTarget.dataset.index, 1)
      }
    }
  })
}

</script>

<style scoped>

</style>